<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程管理</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #f5f6fa;
            padding: 20px;
            margin: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h2 {
            color: #2c3e50;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eee;
        }

        .search-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            align-items: center;
            flex-wrap: wrap;
        }

        input[type="text"] {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            flex: 1;
            min-width: 200px;
            font-size: 14px;
        }

        input[type="text"]:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 5px rgba(52,152,219,0.3);
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .btn-primary {
            background-color: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background-color: #2980b9;
        }

        .btn-secondary {
            background-color: #95a5a6;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #7f8c8d;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: white;
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background-color: #f8f9fa;
            color: #2c3e50;
            font-weight: 600;
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        .action-links {
            display: flex;
            gap: 10px;
        }

        .action-links a {
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
        }

        .edit-link {
            color: #3498db;
        }

        .no-data {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
        }

        @media (max-width: 768px) {
            .search-bar {
                flex-direction: column;
            }

            input[type="text"] {
                width: 100%;
            }

            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h2>课程管理</h2>

    <div class="search-bar">
        <input type="text" id="searchCourse" placeholder="输入课程编号或名称进行搜索">
        <button class="btn btn-primary" onclick="searchCourseByCourseID()">编号搜索</button>
        <button class="btn btn-primary" onclick="searchCourseByCourseName()">名称搜索</button>
        <button class="btn btn-secondary" onclick="fetchCourses()">重置</button>
    </div>

    <table>
        <thead>
        <tr>
            <th>课程编号</th>
            <th>课程名称</th>
            <th>班级编号</th>
            <th>学年</th>
            <th>学期</th>
            <th>课时</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="coursesTableBody">
        </tbody>
    </table>
</div>


<script>
    // 获取所有课程信息
    function fetchCourses() {
        axios.get('/api/course/list')
            .then(function (response) {
                let courses = response.data.data; // 返回响应data字段
                let tableContent = ""; // 表格内容初始化

                $.each(courses, function (index, course) {
                    tableContent += "<tr>";
                    tableContent += "<td>" + course.courseID + "</td>";
                    tableContent += "<td>" + course.courseName + "</td>";
                    tableContent += "<td>" + course.classID + "</td>";
                    tableContent += "<td>" + course.year + "</td>";
                    tableContent += "<td>" + course.term + "</td>";
                    tableContent += "<td>" + course.hour + "</td>";
                    tableContent += "<td>";
                    tableContent += '<a href="CM06_courseFormUser.jsp?courseID=' + course.courseID + '">编辑</a>';
                    tableContent += "</td>";
                    tableContent += "</tr>";
                });
                // 插入表格内容
                $('#coursesTableBody').html(tableContent);
            })
            .catch(function (error) {
                console.error("错误:", error);
            });
    }

    // courseID 搜索课程
    function searchCourseByCourseID() {
        const courseID = $('#searchCourse').val().trim();
        if (!courseID) {
            alert("请输入课程编号进行搜索");
            return;
        }
        // 发起后端请求
        axios.get('/api/course/courseID/' + courseID)
            .then(function (response) {
                if (response.data.code === 1) { // 判断请求是否成功
                    const course = response.data.data; // 返回响应data字段
                    const courses = [course]; // 将单条记录包装成数组
                    let tableContent = ""; // 表格内容初始化

                    $.each(courses, function (index, course) {
                        tableContent += "<tr>";
                        tableContent += "<td>" + course.courseID + "</td>";
                        tableContent += "<td>" + course.courseName + "</td>";
                        tableContent += "<td>" + course.classID + "</td>";
                        tableContent += "<td>" + course.year + "</td>";
                        tableContent += "<td>" + course.term + "</td>";
                        tableContent += "<td>" + course.hour + "</td>";
                        tableContent += "<td>";
                        tableContent += '<a href="CM06_courseFormUser.jsp?courseID=' + course.courseID + '">编辑</a>';
                        tableContent += "</td>";
                        tableContent += "</tr>";
                    });
                    // 渲染表格内容
                    $('#coursesTableBody').html(tableContent);
                } else {
                    alert("未找到课程！");
                    $('#coursesTableBody').html(""); // 清空表格
                }
            })
            .catch(function (error) {
                console.error("搜索请求错误:", error);
                alert("搜索失败，请稍后重试！");
            });
    }

    // courseName 搜索课程
    function searchCourseByCourseName() {
        const courseName = $('#searchCourse').val().trim();
        if (!courseName) {
            alert("请输入课程名称进行搜索");
            return;
        }
        // 发起后端请求
        axios.get('/api/course/courseName/' + courseName)
            .then(function (response) {
                if (response.data.code === 1) { // 判断请求是否成功
                    const course = response.data.data; // 返回响应data字段
                    const courses = [course]; // 将单条记录包装成数组
                    let tableContent = ""; // 表格内容初始化

                    $.each(courses, function (index, course) {
                        tableContent += "<tr>";
                        tableContent += "<td>" + course.courseID + "</td>";
                        tableContent += "<td>" + course.courseName + "</td>";
                        tableContent += "<td>" + course.classID + "</td>";
                        tableContent += "<td>" + course.year + "</td>";
                        tableContent += "<td>" + course.term + "</td>";
                        tableContent += "<td>" + course.hour + "</td>";
                        tableContent += "<td>";
                        tableContent += '<a href="CM06_courseFormUser.jsp?courseID=' + course.courseID + '">编辑</a>';
                        tableContent += "</td>";
                        tableContent += "</tr>";
                    });
                    // 渲染表格内容
                    $('#coursesTableBody').html(tableContent);
                } else {
                    alert("未找到课程！");
                    $('#coursesTableBody').html(""); // 清空表格
                }
            })
            .catch(function (error) {
                console.error("搜索请求错误:", error);
                alert("搜索失败，请稍后重试！");
            });
    }

    window.onload = fetchCourses;
</script>
</body>
</html>
